<template>
  <div class="banner">
    <h1>三淅高速指挥调度中心</h1>
    <div class="login">
      <div class="login-top">
        <div class="login-dis">
          <div class="login-title">用户登录</div>
          <div class="login-text">请输入您的用户名密码进行登录</div>
        </div>
        <div class="login-img">
          <i class="el-icon-edit"></i>
        </div>
      </div>
      <div class="login-bottom">
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
                 class="demo-ruleForm login-container">
          <el-form-item prop="account">
            <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="验证码"></el-input>
          </el-form-item>
          <!--<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
          <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">
              登录
            </el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
    import userService from 'services/userService'
    import NProgress from 'nprogress'

    let res = {"msg":"cn","code":1,"commonMenus":[{"name":"隧道监控","language":"cn","selId":139,"icon":"icon-earphones","parentId":101,"url":"#/page/tunnelPlan/show","isCommon":1}],"menus":[{"name":"监控","language":"cn","selId":101,"icon":"icon-eye","parentId":0,"isCommon":1},{"name":"设备运维","language":"cn","selId":116,"icon":"","parentId":0,"isCommon":0},{"name":"基础信息维护","language":"cn","selId":184,"parentId":0,"url":"","isCommon":0},{"name":"统计分析","language":"cn","selId":122,"icon":"icon-bar-chart","parentId":0,"isCommon":0},{"name":"供电管理","language":"cn","selId":236,"parentId":0,"isCommon":0},{"name":"权限管理","language":"cn","selId":126,"icon":"icon-setting","parentId":0,"isCommon":0}],"alarmcount":0,"user":{"code":"USMK5UQ","name":"管理员","status":1,"language":"cn","companyCode":"CUXM9D8","userType":"oem","loginName":"cloudinnov","logo":"http://10.152.212.9:8080/upload/201710/32a23895ad2947ce8c1a00b1344548bf.png","phone":"13621475121","email":"123@qq.com","roleCode":"ROLBB63","defaultLanguage":"cn","defaultView":1,"isCommon":1},"token":"ce19c846d68b18b17843d382d1347b"}


    export default {
        data() {
            return {
                logining: false,
                ruleForm2: {
                    account: '1111',
                    checkPass: '1111'
                },
                rules2: {
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    checkPass: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        //{ validator: validaePass2 }
                    ]
                },
                checked: true
            };
        },
        methods: {
            handleReset2() {
                this.$refs.ruleForm2.resetFields();
            },
            handleSubmit2(ev) {
                var _this = this;
                this.$refs.ruleForm2.validate((valid) => {
                  if (valid) {

                        // _this.$router.replace('/table');
                        this.logining = true;
                        NProgress.start();
                        var loginParams = { code: this.ruleForm2.account, phone: this.ruleForm2.checkPass };

                        userService.phonelogin(loginParams).then(res => {
                        	console.log(res);
                            this.logining = false
                            NProgress.done()
                            // if (res.code == 1){
                                sessionStorage.setItem('oauth', JSON.stringify(res))
                                this.$store.dispatch('loginName', res)

                                this.$router.push('/aboutcompany')
                            // }else{
                            //     this.$message.error(res.msg)
                            // }
                        }).catch(res => {
                          this.logining = false
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }

</script>

<style lang="scss" scoped>
  .banner{
    width: 100%;
    height:100%;
    margin: 0;
    background: url("../../assets/img/bg1.jpg") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    h1{
      font-size: 38px;
      font-weight: 100;
      color: #555;
      line-height: 50px;
      margin-top: 150px;
    }
    .login{
      width: 450px;
      .login-top{
        background: rgba(0, 0, 255, 0.30);
        width: 100%;
        display: flex;
        flex-direction: row;
        .login-dis{
          width: 350px;
          .login-title{
            height: 50px;
            line-height: 50px;
            font-size: 22px;
            font-weight: 300;
            color: #555;
            padding-left: 40px;

          }
          .login-text{
            height: 40px;
            font-size: 16px;
            font-weight: 300;
            color: #666;
            line-height: 40px;
            padding-left: 40px;

          }
        }
        .login-img{
          width: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          .el-icon-edit{
            font-size: 30px;
            color: #fff;
          }
        }
      }
      .login-bottom{
        background: rgba(0, 0, 255, 0.2);
      }
    }
  }
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    /*margin: 180px auto;*/
    /*width: 350px;*/
    padding: 35px 35px 15px 40px;
    .remember {
      color: #fff;
      margin: 0px 0px 35px 0px;
    }
  }
</style>